<template>
	<div class="container">
        <TmallNavBar>
            <template #left><i class="icon iconfont icon-zuojiantou"></i></template>
            <template #default>修改手机号</template>
            <template #right><i class="icon iconfont icon-wode" @click="$router.push({path: '/me'})"></i></template>
        </TmallNavBar>

		<van-form @submit="handleSave">
            <van-field
                v-model="formData.mobile"
                type="number"
                name="手机号"
                placeholder="请输入手机号"
                maxlength="11"
                :rules="[{ validator, message: '请输入正确格式的手机号' }]"
            />

            <!-- 保存按钮 -->
            <div style="margin: 16px">
                <van-button
                    type="primary"
                    native-type="submit"
                    round
                    block
                    color="#27BA9B"
                >
                    保&nbsp;&nbsp;存
                </van-button>
            </div>
		</van-form>
	</div>
</template>

<script setup>
import { reactive } from "vue"
import { showSuccessToast } from 'vant'
import { useUserStore } from '@/store/modules/user'

// 用户存储
const userStore = useUserStore()

// 手机号验证
const validator = (value) => /^1[3|5|7|8|9]\d{9}$/.test(value)

// 表单数据
const formData = reactive({
	mobile: userStore.profile.user.mobile
})

// 保存数据
const handleSave = async () => {
    await userStore.modifyMobile(formData)
    showSuccessToast('修改成功')
}
</script>

<style lang="scss">
.container {
    height: 100vh;
    background-color: ghostwhite;
	margin-top: 45px;
	padding: 5px;
	font-size: 14px;
	line-height: 24px;
	button {
		background: #27BA9B;
	}
}
</style>
